<template>
  <div class="app-container">
    <!-- 表格（列表） -->
    <StuTable
      :header-cell-style="{ 'text-align': 'left' }"
      :cell-style="{ 'text-align': 'left' }"
      :stripe="true"
      border
      :list="tableData"
      :columns="propsLabel"
      :handles="handles"
      @handleClick="clickHandle"
    >
      <template v-slot:optionDate="{ scope }">
        <span>{{
          scope.row.optionDate | timeFmtFilter("yyyy-MM-dd hh:mm:ss")
        }}</span>
      </template>
    </StuTable>

    <!-- 分页 -->
    <Pagination
      :total="pageConfig.total"
      :page.sync="pageConfig.page"
      :pageSizes="undefined"
      :pageSize.sync="pageConfig.pageSize"
      @pagination="getPagination"
    />

    <!-- 编辑角色名 -->
    <EditRoleName
      v-if="dialogs.editRoleName"
      :visible.sync="dialogs.editRoleName"
      :roleInfo="dialogs.row"
      @updateData="getPowerList"
    />

    <!-- 编辑角色 -->
    <EditRole
      v-if="dialogs.editRole"
      :visible.sync="dialogs.editRole"
      :roleInfo="dialogs.row"
      @updateData="getPowerList"
    />

    <!-- 编辑用户 -->
    <EditUser
      v-if="dialogs.editUser"
      :visible.sync="dialogs.editUser"
      :roleInfo="dialogs.row"
      @updateData="getPowerList"
    />
  </div>
</template>

<script>
import { getPowerList, delRole } from "@/api/role";
import { timeFormat } from "@/utils/index";
import EditRoleName from "./components/EditRoleName";
import EditRole from "./components/EditRole";
import EditUser from "./components/EditUser";
import { done } from "nprogress";
export default {
  name: "Role",
  components: {
    EditRoleName,
    EditRole,
    EditUser
  },
  data() {
    return {
      // 表格的列表数据--------------------------------------------
      tableData: [],
      //表头--------------------------------------------
      propsLabel: [
        // 表格的表头数据及其参数名称
        { name: "角色名", value: "powerName" },
        { name: "操作时间", value: "optionDate", slotName: "optionDate" }
      ],
      //表格的操作列--------------------------------------------
      handles: {
        name: "操作",
        width: "400",
        show: true,
        btns: [
          {
            name: "修改角色名",
            show: true,
            type: "roleName",
            btnType: "primary"
          },
          {
            name: "修改权限",
            show: true,
            type: "authority",
            btnType: "primary"
          },
          {
            name: "修改用户",
            show: true,
            type: "editUser",
            btnType: "primary"
          },
          { name: "删除", show: true, type: "del", btnType: "danger" }
        ]
      },
      //分页数据--------------------------------------------
      pageConfig: {
        total: 10,
        page: 1,
        pageSize: 10
      },
      //弹窗--------------------------------------------
      dialogs: {
        // 编辑角色名
        editRoleName: false,
        //编辑角色--------------------------------------------
        editRole: false,
        //编辑用户--------------------------------------------
        EditUser: false,
        row: {}
      }
    };
  },

  mounted() {
    this.getPowerList();
  },
  methods: {
    //获取角色列表数据--------------------------------------------
    async getPowerList() {
      const params = {
        page: this.pageConfig.page,
        pageSize: this.pageConfig.pageSize
      };
      let res = await getPowerList(params).catch(err => console.log(err));
      if (!res) return;
      this.tableData = res.items;
      this.$set(this.pageConfig, "total", res.total);
      console.log(res);
    },

    //分页数据-------------------------------------------
    getPagination(data) {
      this.$set(this.pageConfig, "page", data.page);
      this.$set(this.pageConfig, "pageSize", data.pageSize);
      this.getPowerList();
    },

    // 表格的操作--------------------------------------------
    clickHandle(row, type) {
      switch (type) {
        //删除--------------------------------------------
        case "del":
          this.delRole(row);
          break;
        //编辑角色名--------------------------------------------
        case "roleName":
          this.$set(this.dialogs, "editRoleName", true);
          this.$set(this.dialogs, "row", row);
          break;
        //编辑角色--------------------------------------------
        case "authority":
          this.$set(this.dialogs, "editRole", true);
          this.$set(this.dialogs, "row", row);
          break;
        //编辑用户--------------------------------------------
        case "editUser":
          this.$set(this.dialogs, "editUser", true);
          this.$set(this.dialogs, "row", row);
          break;
      }
    },

    //删除角色--------------------------------------------
    async delRole(row) {
      let done = await this.$confirm("确定删除角色？").catch(_ => {});
      if (!done) return;
      const data = {
        uuid: row.uuid
      };
      delRole(data).then(res => {
        if (res.state == 100) {
          this.$message({ message: res.msg, type: "success" });
          this.getPowerList();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
